<template>
  <div class="version-timeline-wrapper">
    <el-card class="version-timeline-card">
      <template #header>
        <div class="timeline-header">
          <span class="header-title">{{ title }}</span>
          <el-link
            v-if="showFullRecordLink"
            type="primary"
            underline="never"
            :href="fullRecordUrl"
            target="_blank"
            @click="handleFullRecordClick"
          >
            {{ fullRecordText }}
            <el-icon class="link-icon"><TopRight /></el-icon>
          </el-link>
        </div>
      </template>

      <el-scrollbar :height="scrollHeight">
        <el-timeline class="timeline-content">
          <el-timeline-item
            v-for="(item, index) in versionList"
            :key="item.id || `timeline-${index}`"
            :timestamp="formatDate(item.date)"
            placement="top"
            :color="getTimelineColor(index)"
            :hollow="index !== 0"
            size="large"
          >
            <div
              class="version-item"
              :class="getVersionItemClass(index)"
              @click="handleItemClick(item, index)"
            >
              <div class="version-header">
                <el-text tag="strong" class="version-title">{{
                  item.title
                }}</el-text>
                <el-tag
                  v-if="item.tag"
                  :type="getTagType(index)"
                  size="small"
                  class="version-tag"
                >
                  {{ item.tag }}
                </el-tag>
              </div>

              <el-text class="version-content">{{ item.content }}</el-text>

              <div v-if="item.link" class="version-link">
                <el-link
                  :type="getLinkType(index)"
                  :href="item.link"
                  target="_blank"
                  underline="never"
                  @click="handleLinkClick(item, index, $event)"
                >
                  {{ detailText }}
                  <el-icon class="link-icon"><TopRight /></el-icon>
                </el-link>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup>
import { TopRight } from '@element-plus/icons-vue';
import { computed } from 'vue';

// 定义组件名称
defineOptions({
  name: 'VersionTimeline',
});

// 定义props
const props = defineProps({
  // 版本列表数据
  versionList: {
    type: Array,
    required: true,
    default: () => [],
    validator: (value) => {
      return value.every(
        (item) =>
          item &&
          typeof item.title === 'string' &&
          typeof item.date === 'string' &&
          typeof item.content === 'string',
      );
    },
  },
  // 卡片标题
  title: {
    type: String,
    default: '最新动态',
  },
  // 是否显示完整记录链接
  showFullRecordLink: {
    type: Boolean,
    default: true,
  },
  // 完整记录链接地址
  fullRecordUrl: {
    type: String,
    default: 'https://doc.simplest.net.cn',
  },
  // 完整记录链接文本
  fullRecordText: {
    type: String,
    default: '完整记录',
  },
  // 详情链接文本
  detailText: {
    type: String,
    default: '详情',
  },
  // 滚动区域高度
  scrollHeight: {
    type: String,
    default: '280px',
  },
  // 最新项目颜色
  latestItemColor: {
    type: String,
    default: '#67C23A',
  },
  // 普通项目颜色
  normalItemColor: {
    type: String,
    default: '#909399',
  },
  // 日期格式化函数
  dateFormatter: {
    type: Function,
    default: null,
  },
  // 是否启用项目点击
  enableItemClick: {
    type: Boolean,
    default: false,
  },
});

// 定义事件
const emit = defineEmits(['item-click', 'link-click', 'full-record-click']);

// 计算方法
const getTimelineColor = (index) => {
  return index === 0 ? props.latestItemColor : props.normalItemColor;
};

const getVersionItemClass = (index) => {
  return {
    'latest-item': index === 0,
    clickable: props.enableItemClick,
  };
};

const getTagType = (index) => {
  return index === 0 ? 'success' : 'info';
};

const getLinkType = (index) => {
  return index === 0 ? 'primary' : 'info';
};

const formatDate = (date) => {
  if (props.dateFormatter && typeof props.dateFormatter === 'function') {
    return props.dateFormatter(date);
  }
  return date;
};

// 事件处理方法
const handleItemClick = (item, index) => {
  if (props.enableItemClick) {
    emit('item-click', { item, index });
  }
};

const handleLinkClick = (item, index, event) => {
  emit('link-click', { item, index, event });
};

const handleFullRecordClick = (event) => {
  emit('full-record-click', { event, url: props.fullRecordUrl });
};
</script>

<style lang="scss" scoped>
// 组件根容器
.version-timeline-wrapper {
  width: 100%;
}

.version-timeline-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  :deep(.el-card__header) {
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  :deep(.el-card__body) {
    padding: 0;
  }
}

// 头部样式
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--el-text-color-primary);
  }

  .link-icon {
    margin-left: 4px;
    font-size: 12px;
    transition: transform 0.2s ease;
  }

  .el-link:hover .link-icon {
    transform: translateX(2px);
  }
}

// 时间轴内容
.timeline-content {
  padding: 16px 20px;

  :deep(.el-timeline) {
    padding-left: 0;
  }

  :deep(.el-timeline-item__timestamp) {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
}

// 版本项样式
.version-item {
  padding: 12px 0;
  border-radius: 6px;
  transition: all 0.3s ease;

  &.latest-item {
    .version-title {
      color: var(--el-color-success);
    }
  }

  &.clickable {
    cursor: pointer;
    padding: 12px;
    margin: -12px;

    &:hover {
      background-color: var(--el-fill-color-light);
      transform: translateY(-1px);
    }
  }
}

.version-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;

  .version-title {
    font-size: 14px;
    font-weight: 600;
  }

  .version-tag {
    flex-shrink: 0;
  }
}

.version-content {
  display: block;
  margin-bottom: 12px;
  line-height: 1.6;
  color: var(--el-text-color-regular);
  font-size: 13px;
}

.version-link {
  margin-top: 8px;

  .el-link {
    font-size: 12px;

    .link-icon {
      transition: transform 0.2s ease;
    }

    &:hover .link-icon {
      transform: translateX(2px);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .version-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .timeline-content {
    padding: 12px 16px;
  }

  .version-item {
    &.clickable {
      padding: 8px;
      margin: -8px;
    }
  }
}

@media (max-width: 480px) {
  .version-timeline-card {
    :deep(.el-card__header) {
      padding: 12px 16px;
    }
  }

  .timeline-content {
    padding: 8px 12px;
  }

  .header-title {
    font-size: 14px;
  }

  .version-content {
    font-size: 12px;
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .version-timeline-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }

  .version-item.clickable:hover {
    background-color: var(--el-fill-color-darker);
  }
}
</style>
